// 全局变量
// 默认高亮主题颜色
:root{ 
    // 导航栏背景颜色
    --header-background-color:#f7f7f7ef;
    --main-box-background-color: #ffffff;
    --home-background-color: #ffffffb6;
    --image-filter: brightness(1);
    // 文字颜色
    --text-color: #000000b0;
    // 菜单文字颜色
    --menu-text-color: #515151;
    // 菜单文字激活颜色
    --menu-text-active-color: #000000;
    --skeleton-background-color: #acacac77;
    --el-card--background-color: #ffffff;
    --scrollbar-color: rgb(32, 160, 211);
    --footer-background-color: rgba(255, 255, 255, 0.55);
    --category-name-color: rgb(0, 195, 255);
    --page-title-color:rgb(116, 111, 111);
    --login-dialog-background-color: #ffffff;
    --header-btn-hover-bgc: #cecece;
    // 滚动条颜色
    --scrollbar-color: #606060 #fafafa;
}
// 暗黑主题
:root.dark{
    --header-background-color: #2e2e2e90;
    --main-box-background-color: #000000;
    --home-background-color: #09090bdb;
    --image-filter: brightness(0.5);
    --text-color: #ccc;
    --menu-text-color: #aaa;
    --menu-text-active-color: white;
    --skeleton-background-color: #44444486;
    --el-card--background-color: #1d1e1f;
    --scrollbar-color: rgb(32, 65, 79);
    --footer-background-color: rgba(22, 22, 22, 0.6);
    --category-name-color: #b9b9b9;
    --page-title-color: #b9b9b9;
    --login-dialog-background-color: #1c1c1e;
    --header-btn-hover-bgc: #3b3b3b;
    --scrollbar-color: #8f8f90 #373738;
}

::view-transition-new(root),
::view-transition-old(root) {
    /* 关闭默认动画，否则影响自定义动画的执行 */
    animation: none;
}

.dark::view-transition-old(root) {
    z-index: 100;
}